<template>
	<view class="">
		<!-- 安卓 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="header">
			<view class="header_concent">
				<view class="concent_left">
					<image src="../static/discover/usericon.png" mode=""></image>
				</view>
				<view class="concent_main">
					<text>社区</text>
				</view>
				<view class="concent_right">
					<image src="../static/index/header01.png" mode=""></image>
					<image src="../static/index/header02.png" mode="" ></image>
				</view>
			</view>

			<view class="header_search">
				<image src="../static/index/header03.png" mode="" class="search_image"></image>
				<input type="text" value="" placeholder="搜索相关内容" class="search_input" />
			</view>
		</view>
		<!-- #endif -->
		<!-- 微信 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<view class="header_concent">
				<view class="concent_left">
					<image src="../static/discover/usericon.png" mode=""></image>
				</view>
				<view class="concent_main">
					<text>社区</text>
				</view>
				<view class="concent_right">
					<image src="../static/index/header01.png" mode=""></image>
					<image src="../static/index/header02.png" mode=""></image>
				</view>
			</view>

			<view class="header_search">
				<image src="../static/index/header03.png" mode="" class="search_image"></image>
				<input type="text" value="" placeholder="搜索相关内容" class="search_input" />
			</view>
		</view>
		<!-- #endif -->
	</view>


</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
		},
	}
</script>

<style scoped lang="scss">
	// 安卓
	/* #ifndef MP-WEIXIN */
	.header {
		height: 300rpx;
		background-color: #3476f1;
		box-sizing: border-box;
		padding: 80rpx 0 0;

		// 头部
		.header_concent {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// position: fixed;
			.concent_left {
				image {
					margin: 0 30rpx;
					width: 72rpx;
					height: 72rpx;
				}
			}

			.concent_main {
				font-size: 36rpx;
				font-weight: 700;
				color: #fff;
			}

			.concent_right {
				image {
					margin: 0 15rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		// 搜索
		.header_search {
			background-color: #fff;
			width: 700rpx;
			height: 60rpx;
			margin: 0 auto;
			border-radius: 30rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			.search_image {
				margin: 0 30rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.search_input {}
		}

	}

	/* #endif */
	// 微信
	/* #ifdef MP-WEIXIN */
	.header {
		height: 240rpx;
		background-color: #3476f1;
		// 头部
		.header_concent {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.concent_left {
				image {
					margin: 0 30rpx;
					width: 72rpx;
					height: 72rpx;
				}
			}

			.concent_main {
				font-size: 36rpx;
				font-weight: 700;
				color: #fff;
			}

			.concent_right {
				image {
					margin: 0 15rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		// 搜索
		.header_search {
			background-color: #fff;
			width: 700rpx;
			height: 60rpx;
			margin: 0 auto;
			border-radius: 30rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			.search_image {
				margin: 0 30rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.search_input {}
		}

	}

	/* #endif */
</style>
